@charset "utf-8";
/*注释的区别 会编译在css文件当中*/
//不会编译在css中

/*怎么申明一个变量*/
@mainColor:#e92322;
//使用变量
body{
  /*主题色*/
  color: @mainColor;
}
a{
  color: @mainColor;
}
/*什么是Mixin 混入*/
.redFont{
  color: red;
}
.redBorder{
  border: 1px solid red;
}
/*红色文字和边框  通过class混合*/
.redFontBorder-class{
  .redFont();
  .redBorder();
}
/*方法 不能喝css的类名重复 否则会都引用*/
.redFont-func(){
  color: green;
}
.redBorder-func(){
  border: 1px solid red;
}
/*红色文字和边框  通过func混合*/
.redFontBorder-func{
  .redFont-func();
  .redBorder-func();
}

/*嵌套*/
.wjs_header{
  border-bottom: 1px solid #ccc;
  color: #666;
  font-size: 12px;
  position: relative;
  z-index: 1001;
  .wjs_app{
    color: #666;
    position: relative;
    display: block;
    img{
      display: none;
    }
    &:hover{
      img{
        display: block;
        position: absolute;
        top: 40px;
        left: 50%;
        margin-left: -60px;
        border: 1px solid #ccc;
        border-top: none;
      }
    }
  }
  a{
    color: #666;
  }
  >.container{
    >.row{
      div{
        height: 40px;
        line-height: 40px;
        text-align: center;
        &+div{
          border-left: 1px solid #ccc;
        }
      }
    }
  }
  .btn-register{
    background: #E92322;
    color: #fff;
    padding: 3px 15px;
  }
}

/*导入 import*/
@import "color";
.colorI{
  color: @gary;
}


